<template>
    <el-table border style="width:100%" :data="tableData" class="borderyangshi">
        <el-table-column label="编号" prop="id" width="80"></el-table-column>
        <el-table-column label="资源名称" prop="name" width="280"></el-table-column>
        <el-table-column label="资源路径" prop="url" width="280"></el-table-column>
        <el-table-column label="描述" prop="description" width="280"></el-table-column>
        <el-table-column label="添加时间" prop="createTime" width="325">
            <template #default="scope">
                <div>
                    {{ dayjs(scope.row.createTime).format('YYYY-DD-MM hh:mm:ss') }}
                </div>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination class="fenye" v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
        background :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import * as api from "../../request/api"
import useTabel from "../../hooks/useTables";

import dayjs from "dayjs";



// 请求
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.admin.getAdmineresource)
console.log("tableData", tableData);

// 分页器

</script>

<style lang="scss" scoped>
.fenye {
    float: right;
    margin: 20px 0;
    margin-right: 20px;
}

.borderyangshi {
    margin: 20px;
}
</style>